<template>
  <div>
    <el-card>
      <!-- 搜索区 -->
      <el-row type="flex" justify="space-between">
        <el-form :model="queryData" :inline="true">
          <el-form-item prop="class_name">
            <el-input
              v-model="queryData.class_name"
              placeholder="班级名称"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="queryData.subject_name" placeholder="归属学科">
              <el-option
                v-for="item in subjectList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="queryData.state" placeholder="显示状态">
              <el-option
                v-for="item in isState"
                :key="item.id"
                :label="item.value"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="Search" size="small" type="primary"
              >搜索</el-button
            >
            <el-button @click="Cancel" size="small">取消</el-button>
          </el-form-item>
        </el-form>
        <el-row style="heigth: 40px">
          <el-button
            @click="$refs.adddepts.showDialog = true"
            type="primary"
            size="small"
            >创建班级</el-button
          >
        </el-row>
      </el-row>
      <el-table border :data="list" style="width: 100%">
        <!-- 信息展开 -->
        <el-table-column type="expand">
          <template slot-scope="{ row }">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item style="margin-right: 200px" label="班级名称">
                <span>{{ row.class_name }}</span>
              </el-form-item>
              <el-form-item label="归属学科">
                <span>{{ row.subject_name }}</span>
              </el-form-item>
              <br />
              <el-form-item style="margin-right: 200px" label="创建人">
                <span>{{ row.username }}</span>
              </el-form-item>
              <el-form-item label="开始结束日期">
                <span
                  >{{ row.start_time | formatTime }} 至{{
                    row.end_time | formatTime
                  }}</span
                >
              </el-form-item>
              <br />
              <el-form-item style="margin-right: 200px" label="创建日期">
                <span>{{ row.created_at }}</span>
              </el-form-item>
              <el-form-item label="讲师">
                <el-button
                  size="small"
                  type="primary"
                  plain
                  disabled
                  v-for="item in nameFN(row.teacher_info)"
                  :key="item.user_id"
                >
                  {{ item.username }}</el-button
                >
              </el-form-item>
              <br />
              <el-form-item style="margin-right: 200px" label="助教">
                <el-button
                  size="small"
                  type="success"
                  plain
                  disabled
                  v-for="item in nameFN(row.zhujiao_info)"
                  :key="item.user_id"
                  >{{ item.username }}</el-button
                >
              </el-form-item>
              <el-form-item label="班主任">
                <el-button
                  size="small"
                  type="warning"
                  plain
                  disabled
                  v-for="item in nameFN(row.manager_info)"
                  :key="item.user_id"
                  >{{ item.username }}</el-button
                >
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column type="index" label="序号" width="80">
        </el-table-column>
        <el-table-column prop="id" label=" 班级id" width="80">
        </el-table-column>
        <el-table-column prop="class_name" width="180" label="班级名称">
        </el-table-column>
        <el-table-column prop="subject_name" width="180" label=" 归属学科">
        </el-table-column>
        <el-table-column prop="teacher_info" width="180" label="讲师">
          <template slot-scope="{ row }">
            <el-button
              size="small"
              type="primary"
              plain
              disabled
              v-for="item in nameFN(row.teacher_info)"
              :key="item.user_id"
            >
              {{ item.username }}</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="zhujiao_info" width="180" label="助教">
          <template slot-scope="{ row }">
            <el-button
              size="small"
              type="success"
              plain
              disabled
              v-for="item in nameFN(row.zhujiao_info)"
              :key="item.user_id"
              >{{ item.username }}</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="manager_info" width="120" label="班主任">
          <template slot-scope="{ row }">
            <el-button
              size="small"
              type="warning"
              plain
              disabled
              v-for="item in nameFN(row.manager_info)"
              :key="item.user_id"
              >{{ item.username }}</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="username" width="150" label="创建人">
        </el-table-column>
        <el-table-column prop="state" width="120" label="是否显示">
          <template slot-scope="{ row }">
            <el-switch
              :value="row.state"
              @change="Change(row)"
              :active-value="1"
              :inactive-value="2"
              active-text="是"
              inactive-text="否"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="start_time" width="180" label="开始结束日期">
          <template slot-scope="{ row }">
            <span
              >{{ row.start_time | formatTime }} 至{{
                row.end_time | formatTime
              }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" width="180" label="创建日期">
        </el-table-column>
        <el-table-column fixed="right" width="120" label=" 操作">
          <template slot-scope="{ row }">
            <el-button
              size="small"
              type="primary"
              icon="el-icon-edit"
              circle
              @click="editHandler(row)"
            ></el-button>
            <el-button
              size="small"
              type="danger"
              icon="el-icon-delete"
              circle
              @click="delHeadler(row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :current-page.sync="queryData.page"
        :page-sizes="[10, 8, 5]"
        :page-size="queryData.limit"
        layout=" total,sizes, prev, pager, next,jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 弹框 -->
    <add-dept
      ref="adddepts"
      :subject="subjectList"
      @updateList="initData"
    ></add-dept>
  </div>
</template>

<script>
import {
  gitClassInfoListApi,
  getSubjectListApi,
  getClassInfo,
  delClassApi,
  ChangeState,
} from '@/api/class'
import AddDept from './add-depts.vue'
export default {
  name: 'Class',
  components: {
    AddDept,
  },
  data() {
    return {
      queryData: {
        class_name: '',
        state: '',
        page: 1,
        limit: 10,
      },
      list: [], //班级信息列表
      total: 0,
      subjectList: [], //归属学科
      isState: [
        { id: 1, value: '是' },
        { id: 2, value: '否' },
      ],
    }
  },
  created() {
    this.initData()
  },
  methods: {
    async initData() {
      let res = await gitClassInfoListApi(this.queryData)
      let res2 = await getSubjectListApi()
      this.list = res.list
      this.total = res.total
      this.subjectList = res2
      console.log(res)
      console.log(res2)
    },
    nameFN(item) {
      // console.log(JSON.parse(item));
      const arr = JSON.parse(item).map(itm => itm)
      // console.log(arr);

      return arr
    },

    // 每页数量
    handleSizeChange(val) {
      this.queryData.limit = val
      console.log(val)
      this.initData()
    },
    // 页码变化
    handleCurrentChange(val) {
      this.queryData.page = val
      this.initData()
    },
    // 搜索
    Search() {
      this.initData()
    },
    async Cancel() {
      ;(this.queryData.class_name = ''),
        (this.queryData.subject_name = ''),
        (this.queryData.state = ''),
        await this.initData()
      this.queryData = {}
    },
    // 修改
    async editHandler(val) {
      let resN = await getClassInfo(val.id)

      console.log(resN)

      // 数据回显前处理
      // this.$refs.adddepts.formData={}
      resN.teacher_info = JSON.parse(resN.teacher_info)
      resN.zhujiao_info = JSON.parse(resN.zhujiao_info)
      resN.manager_info = JSON.parse(resN.manager_info)
      let arr1 = []
      let arr2 = []
      let arr3 = []
      resN.teacher_info.map(item => {
        arr1.push(item.username)
      })
      resN.zhujiao_info.map(item => {
        arr2.push(item.username)
      })
      resN.manager_info.map(item => {
        arr3.push(item.username)
      })
      resN.teacher_info = arr1
      resN.zhujiao_info = arr2
      resN.manager_info = arr3
      // 时间回显数据
      this.$refs.adddepts.value1.push(resN.start_time)
      this.$refs.adddepts.value1.push(resN.end_time)
      this.$refs.adddepts.formData = resN

      this.$refs.adddepts.showDialog = true
    },
    // 删除
    async delHeadler(val) {
      try {
        await this.$confirm('是否删除')
        await delClassApi(val)
      } catch (error) {
        this.$message.warning('删除失败')
        return
      }
      this.$message.success('删除成功')
      this.initData()
    },

    //列表 状态改变
    async Change(val) {
      let wan = val.state == 1 ? 2 : 1
      try {
        await ChangeState({ id: val.id, state: wan })
      } catch (error) {
        console.log(error)
        this.$message.warning('修改失败')
        return
      }
      this.initData()
      this.$message.success('状态修改成功')
      console.log(val)
    },
  },
}
</script>

<style lang="scss" scoped></style>
